MagneticFeatureCard

MagneticFeatureCard turns a ThorAPI Product into an animated, neon-tinged card inspired by the Reactbits magnetic hover effect.

When to Use

• Highlight premium bundles beside an AuroraHero hero.
• Showcase monetized offerings inside dashboards or checkout funnels.
• Drop into pricing grids that deserve extra emphasis.

Props

Prop	Type	Description
product	Product	Source data with name, description, price, and optional features.
highlightColor?	string	Accent color for halo + bullet markers (defaults to Valkyr cyan).
intensity?	number	Degrees of tilt on pointer move. Lower for subtle movement.
featuresToShow?	number	Maximum entries rendered from product.features.
onInquire?	(product: Product) => void	Handler for the "Request Demo" CTA.
onAddToCart?	(product: Product) => void	Handler for the purchase CTA.

Usage

import MagneticFeatureCard from "@valkyr/component-library/MagneticFeatureCard";
import { Product, ProductStatusEnum, ProductTypeEnum } from "@thor/model";

const proTier: Product = {
  id: "thorapi-pro",
  name: "ThorAPI Pro",
  price: 9500,
  salePrice: 7900,
  status: ProductStatusEnum.AVAILABLE,
  type: ProductTypeEnum.CLOUD,
  description: "Enterprise-ready code generation with built-in RBAC and observability.",
  features: [
    { name: "AI workflow pack" },
    { name: "SecureField + audit" },
    { name: "24/7 ValorIDE" },
  ],
};

<MagneticFeatureCard
  product={proTier}
  highlightColor="#f472b6"
  onInquire={(record) => console.log("demo", record.id)}
  onAddToCart={(record) => console.log("purchase", record.id)}
/>;

Pairings

• Pair with OrbitalIconCloud to illustrate partner ecosystems near pricing.
• Slot under a VelocityScrollPanel to upsell features listed in updates.

Implementation Notes

• Uses CSS custom properties for tilt and glow so parent layouts can animate them in sync.
• Pointer listeners are automatically cleaned up on unmount to avoid memory leaks in lists.
• Fallback copy keeps Chromatic/Storybook snapshots informative without API data.